<script setup>
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import http from "@/untils/http.js";
// 使用 useRoute 钩子获取当前路由对象
const route = useRoute();
// 从路由对象中解构出用户ID参数
let id = route.params.id;

const user = ref(null);
const getUser = async () => {
  const response = await http.get("/user/getUserById", {
    params: { id: id }, // 可以省略为 params: { id }
  });
  user.value = response.data;
};

onMounted(() => {
  getUser();
});
</script>

<template>
  <div>
    <h1>个人主页</h1>
    <div v-if="user">
      <p>用户ID：{{ user.id }}</p>
      <p>姓名：{{ user.name }}</p>
      <p>性别：{{ user.gender }}</p>
      <p>生日：{{ user.birthday }}</p>
      <p>邮箱：{{ user.email }}</p>
      <p>个人简介：{{ user.bio }}</p>
    </div>
  </div>
</template>
